<template>
   <div class='homeT'>
    <!-- this.$store.state.userInfor.authority == 2 -->
        <!-- <div class="home-left"  v-if="userIDHome">
            <el-row class="tac">
                <el-col :span="40">
                    <el-menu
                        width="100"
                        :router="true"
                        :default-active="activeMenu"
                        @open="handleOpen"
                        @select="activation"
                        @close="handleClose"
                        background-color="#9ACEF9"
                        class="el-menu-vertical-demo"
                        text-color="#fff"
                    >
                        <el-menu-item index="/Startthe_exam"  >
                            <el-icon><icon-menu /></el-icon>
                            <span>开始考试</span>
                        </el-menu-item>
                        <el-menu-item index="/history" >
                            <el-icon><icon-menu /></el-icon>
                            <span>历史试卷</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </div> -->
        <div class="home-left" v-if="!userIDHome">
            <el-row class="tac">
                <el-col :span="40">
                <el-menu
                    :router="true"
                    :default-active="activeMenu"
                    @open="handleOpen"
                    @close="handleClose"
                    @select="activation"
                    background-color="#FFF"
                    class="el-menu-vertical-demo"
                    text-color="#606266"
                >
                    <el-menu-item index="/">
                        <el-icon><icon-menu /></el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/Classinformation" :disabled="this.$store.state.userInfor.authority < 3">
                        <img src="../assets/calss.png" style="width: 20px; height: 20px;" alt="">
                        <span>培训期管理</span>
                    </el-menu-item>
                    <el-menu-item index="/student" :disabled="this.$store.state.userInfor.authority < 3">
                        <img src="../assets/luruT.png" style="width:20px; height:20px;" alt="">
                        <span>学员录入</span>
                    </el-menu-item>
                    <el-menu-item index="/TiMData" :disabled="this.$store.state.userInfor.authority < 3">
                        <span>题库类型管理</span>
                    </el-menu-item>
                    <el-sub-menu index="2" :disabled="this.$store.state.userInfor.authority < 3">
                        <template #title>
                            <img src="../assets/kaoBlue.png" style="width:20px; height:20px;" alt="">
                            <span>考试试卷</span>
                        </template>
                        <el-menu-item-group title="">
                            <el-menu-item index="/generate">设置试卷</el-menu-item>
                            <el-menu-item index="/examination">上传试题</el-menu-item>
<!--                             
                            <el-menu-item index="/questions">试题库</el-menu-item> -->
                        </el-menu-item-group>
                    </el-sub-menu>
                    <!-- <el-menu-item index="/Startthe_exam" :disabled="this.$store.state.userInfor.authority <= 2">
                        <el-icon><document /></el-icon>
                        <span>考试页面</span>
                    </el-menu-item> -->
                    <el-menu-item index="/Studentsearch">成绩查询</el-menu-item>
                    <el-menu-item index="/ScoreStatistics">成绩统计分析</el-menu-item>
                    <!-- ------------------------------------------------------------------------------------------- -->
                    <!-- <el-sub-menu index="1" :disabled="this.$store.state.userInfor.authority < 3">
                        <template #title>
                            <span>课堂列表</span>
                        </template>
                        <el-menu-item-group title="课堂记录">
                            <el-menu-item index="/classroom">课堂记录</el-menu-item>
                            <el-menu-item index="/Studentsearch">成绩查询</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu> -->
                    <!-- -------------------------------------------------------------------------------------------- -->
                    <!-- <el-menu-item index="/analysis" :disabled="this.$store.state.userInfor.authority < 3">
                        <img src="../assets/luruT.png" style="width:20px; height:20px;" alt="">
                        <span>学员成绩分析</span>
                    </el-menu-item> -->
                    <!-- ----------------------------------------------------------------------------------------------- -->
                   
                </el-menu>
                </el-col>
            </el-row>
        </div>
        <div style="width:100%; height:100%;">
            <div class="Top_frame">
                <img src="../assets/topsize.png" style="width: 520px; height:50px;" alt="">
                <!-- <p style="font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;font-weight: 700; font-size: 32px;color: #FFFFFF;line-height: 67px;">警察训练考试系统</p>
                <img src="../assets/policeinsignia.png" style="width:50px; height: 50px;position: absolute;left: 4%;top: 7px;" alt=""> -->
                <div>
                    <el-dropdown :hide-on-click="false">
                        <span class="el-dropdown-link">
                            <el-avatar shape="square" :size="size" :src="squareUrl" /> 
                          <el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item divided @click="Personal()">个人中心</el-dropdown-item>
                                <el-dropdown-item divided @click="quit()">退出登陆</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="home-content">
                <!-- <div style=" width: 100%; padding: 10px; background: #FFFFFF; border-radius: 0px 0px 0px 0px;">
                    <el-tag v-for="(tag,indexA) in RouterData" :key="tag" closable type="info" style="background-color:#2A5FDD; color: #FFF;"  @close="handleCloseT(tag,indexA)">
                        {{ tag }}
                    </el-tag>
                </div> -->
                <router-view style="height: 94%; box-shadow:''; " />
            </div>
        </div>
   </div>
</template> 
<script>
export default {
    name: '',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    data () {
        return {
            squareUrl: require('../assets/Avatar.png'),
            activeMenu: '/',
            userIDHome: true,
            RouterData:[],
        }
    },
    computed: {},
// 侦听器
    watch: {
        '$route': {
            immediate: true,
            handler(route) {
                this.activeMenu = route.path;
            }
        }
    },
    created () {
        this.$nextTick(() => {
            return
            document.oncontextmenu = new Function("event.returnValue=false");
            document.onselectstart = new Function("event.returnValue=false");
            document.addEventListener("keydown", function (e) {
                if (e.key == "F12" || e.key == 'F11' || e.key == 'F1' || e.key == 'F2' || e.key == 'F5' || e.key == 'F4') {
                    e.preventDefault();
                }
            });
            // 禁用新窗口打开
            document.addEventListener('click', function(e) {
                if (e.button === 1) {
                    e.preventDefault();
                }
            });
            // 禁用页面刷新
            window.onbeforeunload = function(e) {
                e.preventDefault();
                e.returnValue = '';
            };
            // 禁用新窗口打开
            document.addEventListener('click', function(e) {
                if (e.button === 1) {
                    e.preventDefault();
                }
            });
            // 禁用控制台访问
            console.log = function() {};
            this.$message({
                message: '已禁止复制粘贴,请不要尝试复制粘贴',
                type: 'error',
            })
            let _this = this
            document.addEventListener('keydown', function(event) {
                if (event.ctrlKey && event.key === 'v') {
                    _this.$message({
                        message: '粘贴操作已被检测！',
                        type: 'error',
                    })
                }
                if(event.ctrlKey && event.key === 'c') {
                    _this.$message({
                        message: '不允许复制!',
                        type: 'error',
                    })
                }
            });
        });
        if(sessionStorage.getItem('info') != null ) {
            if(JSON.parse(sessionStorage.getItem('info')).r_id <= 2){
                this.userIDHome = true
            }else{
                this.userIDHome = false
            }
        }else{
            this.$router.push('/Login')
        }
    },
    mounted () {
        document.addEventListener('keydown', this.preventRefresh);
        
    },
// 组件方法
    methods: {
        Personal() {
            this.$router.push("/Personal")
        },
        quit() {
            this.get('/logout').then(res=>{
                if(res.code == '200'){
                    this.$message({
                        message: '退出登陆！',
                        type: 'success',
                    })
                    sessionStorage.removeItem("info");
                    this.$router.push("/login")
                }
            })
        },
        handleOpen (key ,keyPath)  {
            console.log(key, keyPath)
        },
        handleCloseT(val,index) {
            this.RouterData.splice(index, 1)
        },
        handleClose (key, keyPath) {
            console.log(key, keyPath)
        },
        activation(path, item){
            setTimeout(() => {
                this.RouterData.push(this.$route.meta.title)
                this.RouterData = [...new Set(this.RouterData)]
                console.log(this.RouterData)
            }, 200);
        },
        preventRefresh(event) {
            // if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
            //     event.preventDefault();
            // }
        },
        enterFullScreen() {
            let element = document.documentElement;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { /* Firefox */
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { /* IE/Edge */
                element.msRequestFullscreen();
            }
        },
    },
// 创建前
    beforeCreate () { },
// 挂载前
    beforeMount () {},
// 更新前 
    beforeUpdate () {},
    updated () {},
// 组件创建最初始keep-alive标签中有效
    activated () { },
// 组件停用时
    deactivated () {},
// 销毁前
    beforeDestroy () {
        window.removeEventListener('beforeunload', this.beforeUnload);
        document.removeEventListener('keydown', this.preventRefresh);
    },
// 销毁后
    destroyed () {}
}
</script> 
<style>
.el-col-40{
    width: 100%;
}
</style>
<style scoped>
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
  flex: 1;
}
.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.Top_frame{
    width: 100%;
    height: 63px;
    box-shadow: 4px 5px 63px -24px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    background: #2A5FD8;
    position: fixed;
    top: 0px;
    left: 0px;
    justify-content: space-between;
    padding: 0px 42px;
    z-index: 50;
}
.home-left{
    width: 167px;
    height: 87%;
    margin-top: 4%;
    background-color: #FFFFFF;
    border-right: solid 1px var(--el-menu-border-color);
}
.home-content::-webkit-scrollbar {
    width: 0;
}
.home-content{
    width: 100%;
    height: 100%;
    background-color: #F5F7FA;
    overflow: auto;
    padding: 4.5% 10px 10px 10px;
}
.homeT{
    width: 100%;
    height: 100%;
    display: flex;
}
</style>